<script setup>
const info = reactive({
    telephone:'',
    code:''
})
</script>

<template>
    <div class="pageWrapper">
        <p>已绑定手机号</p>
        <p class="bindmobile">199******00</p>
        <p class="bindcontent">一个手机号可以绑定5个锐智CloudSync账号，但该手机号只能登录其中一个账号。绑定手机号将作为您身份验证的重要方式，请谨慎操作！</p>
        <el-input v-model="info.telephone" style="width:325px;height:40px;margin-top:30px"  placeholder="请输入要更改的手机号" />
        <div class="content-element">
            <el-input v-model="info.code" style="width:200px;height:40px"  placeholder="手机验证码" />
            <button class="bindbtn">发送短信</button> 
        </div>
        <button class="bindbtn-sub">确认</button>
        
    </div>
</template>

<style scoped>
.pageWrapper {
    width: 95%;
    background-color: #fff;
    height: calc(100vh - 120px);
    margin: 0 auto;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 50px;
}

.pageWrapper .bindmobile {
    font-size: 30px;
    padding-top: 8px;
}

.pageWrapper .bindcontent {
    color: #8c939d;
    margin-top: 10px;
}
.content-element{
    height:50px;
    margin-top:10px
}
.bindbtn {
    width: 120px;
    height: 40px;
    background-color: #2E58FF;
    color: #fff;
    margin-left: 5px;
    border: #fff;
    cursor: pointer;
    border-radius: 5px;
}
.bindbtn-sub{
    width: 330px;
    height: 40px;
    background-color: #2E58FF;
    color: #fff;
    margin-left: 5px;
    border: #fff;
    cursor: pointer;
    border-radius: 5px;
}
</style>
